<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ASCII和ANSI</title>
</head>
<style>
.cell{
	border: 1px solid #ccc;
	padding: 12px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	/* font-size: 36px; */
	text-align: right;
}
.cell > div{
	display: inline-block;
	/* border: 1px solid #c00; */
	
}
span:nth-child(1){
	color: #eee;
	/* color: #F00; */
}
</style>
<body>
<h3>原理解释</h3>
<p>1、下面这样写可以显示字母a。因为字母a的Unicode码十进制值是97</p>
<p>&lt;span&gt;&amp;#97;&lt;/span&gt;</p>
<span>&#97;</span>

<hr style="border: none; border-top: 1px solid #E6E6E6;"/>

<p>2、再举一个例子：汉字：严</p>
<p>&lt;span&gt;&amp;#20005;&lt;/span&gt;</p>
<span>&#20005;</span>
<p>而20005的16进制值是4E25，所以也可以通过'\u{4E25}'来显示。【但需要通过char.innerHTML = '\u{1F600}';方式】</p>
<span id="char1"></span><span id="char2"></span>
<script type="text/javascript">
	char1.innerHTML = '\u4E25';		//严		如果只有4位，则可以省略花括号
	char2.innerHTML = '\u{1F600}';		//😀
</script>

<h3>ASCII 可打印的字符</h3>
<div class="cell">
	<div><span>32</span><span>&#32;</span></div><div><span>33</span><span>&#33;</span></div><div><span>34</span><span>&#34;</span></div><div><span>35</span><span>&#35;</span></div>
	<div><span>36</span><span>&#36;</span></div><div><span>37</span><span>&#37;</span></div><div><span>38</span><span>&#38;</span></div><div><span>39</span><span>&#39;</span></div>
	<div><span>40</span><span>&#40;</span></div><div><span>41</span><span>&#41;</span></div><div><span>42</span><span>&#42;</span></div><div><span>43</span><span>&#43;</span></div>
	<div><span>44</span><span>&#44;</span></div><div><span>45</span><span>&#45;</span></div><div><span>46</span><span>&#46;</span></div><div><span>47</span><span>&#47;</span></div>
	<div><span>48</span><span>&#48;</span></div><div><span>49</span><span>&#49;</span></div><div><span>50</span><span>&#50;</span></div><div><span>51</span><span>&#51;</span></div>
	<div><span>52</span><span>&#52;</span></div><div><span>53</span><span>&#53;</span></div><div><span>54</span><span>&#54;</span></div><div><span>55</span><span>&#55;</span></div>
	<div><span>56</span><span>&#56;</span></div><div><span>57</span><span>&#57;</span></div><div><span>58</span><span>&#58;</span></div><div><span>59</span><span>&#59;</span></div>
	<div><span>60</span><span>&#60;</span></div><div><span>61</span><span>&#61;</span></div><div><span>62</span><span>&#62;</span></div><div><span>63</span><span>&#63;</span></div>
	<div><span>64</span><span>&#64;</span></div><div><span>65</span><span>&#65;</span></div><div><span>66</span><span>&#66;</span></div><div><span>67</span><span>&#67;</span></div>
	<div><span>68</span><span>&#68;</span></div><div><span>69</span><span>&#69;</span></div><div><span>70</span><span>&#70;</span></div><div><span>71</span><span>&#71;</span></div>
	<div><span>72</span><span>&#72;</span></div><div><span>73</span><span>&#73;</span></div><div><span>74</span><span>&#74;</span></div><div><span>75</span><span>&#75;</span></div>
	<div><span>76</span><span>&#76;</span></div><div><span>77</span><span>&#77;</span></div><div><span>78</span><span>&#78;</span></div><div><span>79</span><span>&#79;</span></div>
	<div><span>80</span><span>&#80;</span></div><div><span>81</span><span>&#81;</span></div><div><span>82</span><span>&#82;</span></div><div><span>83</span><span>&#83;</span></div>
	<div><span>84</span><span>&#84;</span></div><div><span>85</span><span>&#85;</span></div><div><span>86</span><span>&#86;</span></div><div><span>87</span><span>&#87;</span></div>
	<div><span>88</span><span>&#88;</span></div><div><span>89</span><span>&#89;</span></div><div><span>90</span><span>&#90;</span></div><div><span>91</span><span>&#91;</span></div>
	<div><span>92</span><span>&#92;</span></div><div><span>93</span><span>&#93;</span></div><div><span>94</span><span>&#94;</span></div><div><span>95</span><span>&#95;</span></div>
	<div><span>96</span><span>&#96;</span></div><div><span>97</span><span>&#97;</span></div><div><span>98</span><span>&#98;</span></div><div><span>99</span><span>&#99;</span></div>
	<div><span>100</span><span>&#100;</span></div><div><span>101</span><span>&#101;</span></div><div><span>102</span><span>&#102;</span></div><div><span>103</span><span>&#103;</span></div>
	<div><span>104</span><span>&#104;</span></div><div><span>105</span><span>&#105;</span></div><div><span>106</span><span>&#106;</span></div><div><span>107</span><span>&#107;</span></div>
	<div><span>108</span><span>&#108;</span></div><div><span>109</span><span>&#109;</span></div><div><span>110</span><span>&#110;</span></div><div><span>111</span><span>&#111;</span></div>
	<div><span>112</span><span>&#112;</span></div><div><span>113</span><span>&#113;</span></div><div><span>114</span><span>&#114;</span></div><div><span>115</span><span>&#115;</span></div>
	<div><span>116</span><span>&#116;</span></div><div><span>117</span><span>&#117;</span></div><div><span>118</span><span>&#118;</span></div><div><span>119</span><span>&#119;</span></div>
	<div><span>120</span><span>&#120;</span></div><div><span>121</span><span>&#121;</span></div><div><span>122</span><span>&#122;</span></div><div><span>123</span><span>&#123;</span></div>
	<div><span>124</span><span>&#124;</span></div><div><span>125</span><span>&#125;</span></div><div><span>126</span><span>&#126;</span></div>
</div>

<h3>ANSI 可打印的字符</h3>
<div class="cell">
	<div><span>127</span><span>&#127;</span></div><div><span>128</span><span>&#128;</span></div><div><span>129</span><span>&#129;</span></div><div><span>130</span><span>&#130;</span></div>
	<div><span>131</span><span>&#131;</span></div><div><span>132</span><span>&#132;</span></div><div><span>133</span><span>&#133;</span></div><div><span>134</span><span>&#134;</span></div>
	<div><span>135</span><span>&#135;</span></div><div><span>136</span><span>&#136;</span></div><div><span>137</span><span>&#137;</span></div><div><span>138</span><span>&#138;</span></div>
	<div><span>139</span><span>&#139;</span></div><div><span>140</span><span>&#140;</span></div><div><span>141</span><span>&#141;</span></div><div><span>142</span><span>&#142;</span></div>
	<div><span>143</span><span>&#143;</span></div><div><span>144</span><span>&#144;</span></div><div><span>145</span><span>&#145;</span></div><div><span>146</span><span>&#146;</span></div>
	<div><span>147</span><span>&#147;</span></div><div><span>148</span><span>&#148;</span></div><div><span>149</span><span>&#149;</span></div><div><span>150</span><span>&#150;</span></div>
	<div><span>151</span><span>&#151;</span></div><div><span>152</span><span>&#152;</span></div><div><span>153</span><span>&#153;</span></div><div><span>154</span><span>&#154;</span></div>
	<div><span>155</span><span>&#155;</span></div><div><span>156</span><span>&#156;</span></div><div><span>157</span><span>&#157;</span></div><div><span>158</span><span>&#158;</span></div>
	<div><span>159</span><span>&#159;</span></div><div><span>160</span><span>&#160;</span></div><div><span>161</span><span>&#161;</span></div><div><span>162</span><span>&#162;</span></div>
	<div><span>163</span><span>&#163;</span></div><div><span>164</span><span>&#164;</span></div><div><span>165</span><span>&#165;</span></div><div><span>166</span><span>&#166;</span></div>
	<div><span>167</span><span>&#167;</span></div><div><span>168</span><span>&#168;</span></div><div><span>169</span><span>&#169;</span></div><div><span>170</span><span>&#170;</span></div>
	<div><span>171</span><span>&#171;</span></div><div><span>172</span><span>&#172;</span></div><div><span>173</span><span>&#173;</span></div><div><span>174</span><span>&#174;</span></div>
	<div><span>175</span><span>&#175;</span></div><div><span>176</span><span>&#176;</span></div><div><span>177</span><span>&#177;</span></div><div><span>178</span><span>&#178;</span></div>
	<div><span>179</span><span>&#179;</span></div><div><span>180</span><span>&#180;</span></div><div><span>181</span><span>&#181;</span></div><div><span>182</span><span>&#182;</span></div>
	<div><span>183</span><span>&#183;</span></div><div><span>184</span><span>&#184;</span></div><div><span>185</span><span>&#185;</span></div><div><span>186</span><span>&#186;</span></div>
	<div><span>187</span><span>&#187;</span></div><div><span>188</span><span>&#188;</span></div><div><span>189</span><span>&#189;</span></div><div><span>190</span><span>&#190;</span></div>
	<div><span>191</span><span>&#191;</span></div><div><span>192</span><span>&#192;</span></div><div><span>193</span><span>&#193;</span></div><div><span>194</span><span>&#194;</span></div>
	<div><span>195</span><span>&#195;</span></div><div><span>196</span><span>&#196;</span></div><div><span>197</span><span>&#197;</span></div><div><span>198</span><span>&#198;</span></div>
	<div><span>199</span><span>&#199;</span></div><div><span>200</span><span>&#200;</span></div><div><span>201</span><span>&#201;</span></div><div><span>202</span><span>&#202;</span></div>
	<div><span>203</span><span>&#203;</span></div><div><span>204</span><span>&#204;</span></div><div><span>205</span><span>&#205;</span></div><div><span>206</span><span>&#206;</span></div>
	<div><span>207</span><span>&#207;</span></div><div><span>208</span><span>&#208;</span></div><div><span>209</span><span>&#209;</span></div><div><span>210</span><span>&#210;</span></div>
	<div><span>211</span><span>&#211;</span></div><div><span>212</span><span>&#212;</span></div><div><span>213</span><span>&#213;</span></div><div><span>214</span><span>&#214;</span></div>
	<div><span>215</span><span>&#215;</span></div><div><span>216</span><span>&#216;</span></div><div><span>217</span><span>&#217;</span></div><div><span>218</span><span>&#218;</span></div>
	<div><span>219</span><span>&#219;</span></div><div><span>220</span><span>&#220;</span></div><div><span>221</span><span>&#221;</span></div><div><span>222</span><span>&#222;</span></div>
	<div><span>223</span><span>&#223;</span></div><div><span>224</span><span>&#224;</span></div><div><span>225</span><span>&#225;</span></div><div><span>226</span><span>&#226;</span></div>
	<div><span>227</span><span>&#227;</span></div><div><span>228</span><span>&#228;</span></div><div><span>229</span><span>&#229;</span></div><div><span>230</span><span>&#230;</span></div>
	<div><span>231</span><span>&#231;</span></div><div><span>232</span><span>&#232;</span></div><div><span>233</span><span>&#233;</span></div><div><span>234</span><span>&#234;</span></div>
	<div><span>235</span><span>&#235;</span></div><div><span>236</span><span>&#236;</span></div><div><span>237</span><span>&#237;</span></div><div><span>238</span><span>&#238;</span></div>
	<div><span>239</span><span>&#239;</span></div><div><span>240</span><span>&#240;</span></div><div><span>241</span><span>&#241;</span></div><div><span>242</span><span>&#242;</span></div>
	<div><span>243</span><span>&#243;</span></div><div><span>244</span><span>&#244;</span></div><div><span>245</span><span>&#245;</span></div><div><span>246</span><span>&#246;</span></div>
	<div><span>247</span><span>&#247;</span></div><div><span>248</span><span>&#248;</span></div><div><span>249</span><span>&#249;</span></div><div><span>250</span><span>&#250;</span></div>
	<div><span>251</span><span>&#251;</span></div><div><span>252</span><span>&#252;</span></div><div><span>253</span><span>&#253;</span></div><div><span>254</span><span>&#254;</span></div>
	<div><span>255</span><span>&#255;</span></div>
</div>

</body>
</html>